<template>
  <div v-if="display">
    <div class="container">
      <!-- Header -->
      <div id="header">

        <h3>
          {{ list.length != 0 ? list[0].deviceName : '暂无数据' }}
        </h3>
      </div>
      <hr>
      <!-- Navigation bar -->
      <div class="nav">
        <div class="one">
          <div class="list">
            <div class="xinxi">
              <img src="../../assets/icons/PM2.5.png" alt="">
              <div class="text">
                <span> {{ list.length != 0 ? list[0].pmTwoFive : '暂无数据' }}</span>
                <span>PM2.5</span>
              </div>
            </div>
          </div>
          <div class="list">
            <div class="xinxi">
              <img src="../../assets/icons/PM10.png" alt="">
              <div class="text">
                <span> {{ list.length != 0 ? list[0].pmTen : '暂无数据' }}</span>
                <span>PM10</span>
              </div>
            </div>
          </div>

          <!-- <div class="list">
            <div class="xinxi">
              <img src="../../assets/icons/baojing.png" alt="">
              <div class="text">
                <span> {{ list.length != 0 ? list[0].daqiya : '暂无数据' }}</span>
                <span>报警</span>
              </div>
            </div>
          </div> -->


        </div>
      </div>
      <!-- Content -->
      <div class="two">
        <div class="content-details">
          <div class="content-item">设备ID: {{ list.length != 0 ? list[0].deviceId : '暂无数据' }}</div>
          <div class="content-item">所属项目：{{ list.length != 0 ? list[0].deviceName : '暂无数据' }}</div>
          <div class="content-item">项目负责人：</div>
          <div class="content-item">项目人电话：</div>
          <div class="content-item">项目地址：</div>
          <div class="content-item"> <el-button size="mini" type="success" icon="el-icon-cloudy" @click="parameter"
              style="color:white">远端参数</el-button></div>
          <el-dialog title="设备参数" :visible.sync="dialogTableVisible" width="800px">
            <ParaMeter :MapID="list.length > 0 ? list[0].deviceId : ''"></ParaMeter>
          </el-dialog>
        </div>
        </div>
      </div>
    </div>
</template>

<script>
import { listUser } from "../../api/system/user";
import ParaMeter from "../../views/system/equipment/parameter.vue"
export default {
  components: { ParaMeter },
  methods: {
    parameter() {
      if (this.list.length > 0) {
        if (this.list[0].status == '在线') {
          this.dialogTableVisible = true
          console.log(this.timeDeviceID)
        } else {
          this.$message({
            showClose: true,
            message: '离线设备不能操作',
            type: 'erroe'
          });
        }
      } else {
        this.$message({
          showClose: true,
          message: '当前设备不能操作',
          type: 'erroe'
        });
      }


    },
  },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    display: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    list() {
      console.log(this.list)
    }
  },
  data() {
    return {
      dialogTableVisible: false
    }
  },
}
</script>

<style scoped lang="scss" >
.container {
  width: 400px;
  background-color: #045d55;
  text-align: left;
  height: 500px;
  border-radius: 10px;
  box-shadow: 10px 20px 40px rgba(0, 0, 0, 0.15);
  /* 添加阴影效果 */
}

.twoli {
  margin: 0 25px;
  margin-left: -2px;
}

#header {
  background-color: #045d55;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  border-radius: 10px;
}

.nav {
  margin-left: 2px;
  background-color: #fff;
}

.one {
  display: flex;
  flex-wrap: wrap;
}

.list {
  display: flex;
  width: 130px;
  height: 50px;
  background-color: #ffffff;
  margin: 1px;

  .xinxi {
    justify-content: center;
    align-items: center;
    display: flex;

    .text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
}

.two {

  li {
    float: left;
  }
}

.content-details {
  line-height: 30px;
  font-size: 14px;
}

.content-item {
  display: flex;
  width: 100%;
  background-color: #23736d;
  height: 30px;
  color: white;
  margin-top: 1px;
  padding-left: 10px;
}

img {
  z-index: 2;
  width: 30px;
  height: 30px;
  margin-right: 20px
}
</style>
